import React from 'react';
import { connect } from 'dva';
import { Form } from '@ant-design/compatible';
import '@ant-design/compatible/assets/index.css';
import { Card, Button, Timeline, Spin } from 'antd';
import router from 'umi/router';
import moment from 'moment';
import queryString from 'query-string';
import PageHeaderWrapper from '@/components/PageHeaderWrapper';
import FooterToolbar from '@/components/FooterToolbar';

@connect(({ busicont, loading }) => ({
  loading: loading.models.busicont,
  historyList: busicont.historyList, // 客户合同历史记录数据
}))
@Form.create()
class ClientInfoDetails extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      contId: null,
    };
  }

  componentDidMount() {
    const { location } = this.props;
    const { contId } = queryString.parse(location.search);
    this.setState({ contId });
    this.getList(contId);
  }

  // 获取数据
  getList = contId => {
    if (contId) {
      const { dispatch } = this.props;
      dispatch({
        type: 'busicont/getHistoryList',
        payload: {
          contId,
        },
      });
    } else {
      router.push('/salemanage/busicont/index');
    }
  };

  render() {
    const { contId } = this.state;
    const { loading, historyList } = this.props;
    return (
      <PageHeaderWrapper>
        <Spin tip="Loading..." spinning={loading}>
          <Card title={<span style={{ fontWeight: 'bolder' }}>历史记录</span>}>
            <Timeline>
              {historyList.map(item => (
                <Timeline.Item key={item.contHisId}>
                  <p>
                    {moment(item.operTime).format('YYYY-MM-DD HH:mm')}
                    <span style={{ marginLeft: 30 }}>{item.operName}</span>
                    <span style={{ marginLeft: 30 }}>
                      {item.operType === 1 || item.operType === 2 || item.operType === 4 ? (
                        <a
                          onClick={() => {
                            router.push(
                              `/salemanage/busicont/historydetail?contId=${contId}&contHisId=${
                                item.contHisId
                              }`
                            );
                          }}
                        >
                          {item.operTypeName}
                        </a>
                      ) : (
                        item.operTypeName
                      )}
                    </span>
                  </p>
                  <p>{item.operDetail}</p>
                </Timeline.Item>
              ))}
            </Timeline>
          </Card>
          <FooterToolbar style={{ width: '100%' }}>
            <Button onClick={() => router.goBack()}>返回</Button>
          </FooterToolbar>
        </Spin>
      </PageHeaderWrapper>
    );
  }
}

export default ClientInfoDetails;
